<template>
  <div class="app">
    <h1>{{ msg }},学生姓名是：{{ StudentName }}</h1>
    <School :getSchoolName="getSchoolName"></School>
    <!--    &lt;!&ndash;    第一种写法&ndash;&gt;-->
    <!--    <Student v-on:atguigu="getStudentName"></Student>-->
    <!--    第二种写法-->
    <!--    <Student @atguigu="getStudentName" @demo="m1"></Student>-->
    <!--    &lt;!&ndash;    第三种写法&ndash;&gt;-->
    <Student ref="student" @click.native="show"></Student>
<!--    <Student ref="student" @click="show"></Student>-->
  </div>
</template>

<script>
import School from "@/components/School";
import Student from "@/components/Student";

export default {
  name: 'App',
  components: {Student, School},
  data() {
    return {
      msg: "你好啊!",
      StudentName: ""
    }
  },
  methods: {
    getSchoolName(name) {
      console.log('App收到了学校名：', name)
    },
    getStudentName(name, ...params) {
      console.log('App收到了学生名：', name, params)
      this.StudentName = name
    },
    m1() {
      console.log('demo事件被触发了')
    },
    show() {
      alert("hello")
    }
  },
  mounted() {
    this.$refs.student.$on('atguigu', this.getStudentName) //这三种方法推荐这一种

    // this.$refs.student.$on('atguigu', function (name, ...params) {
    //   console.log('App收到了学生名：', name, params)
    //   console.log(this)//this是Student.vue实例对象
    //   this.StudentName = name
    // })

    // this.$refs.student.$on('atguigu', (name, ...params) => {
    //   console.log('App收到了学生名：', name, params)
    //   console.log(this)//this是Student.vue实例对象
    //   this.StudentName = name
    // })
  }
}

</script>

<style>
.app {
  background-color: gray;
  padding: 5px;
}
</style>

